<script setup>
import BaseChart from '@/components/chart/BaseChart.vue'
import { computed } from 'vue'

const props = defineProps({
  category: {
    type: Array,
    default: () => {
      return ['2023', '2022', '2021', '2020', '2019', '2018']
    },
  },
  charData: {
    type: Array,
    default: () => {
      return [150, 200, 210, 300, 180, 410]
    },
  },
  max: { type: Number, default: 600 },
  interval: { type: Number, default: 200 },
})
const extractSdata = (array) => {
  return array.map((item) => item.sdata)
}

const chartOptions = computed(() => {
  return {
    tooltip: {
      trigger: 'axis',
    },
    grid: {
      top: '10%',
      left: '3%',
      right: '0%',
      bottom: '4%',
      containLabel: true,
    },
    xAxis: [
      {
        type: 'category',
        data: props.category,
        axisPointer: {
          type: 'shadow',
        },
        axisLabel: {
          color: '#fff',
        },
      },
    ],
    yAxis: [
      {
        type: 'value',
        name: '',
        min: 0,
        max: props.max,
        interval: props.interval,
        axisLabel: {
          color: '#fff',
        },
        splitLine: {
          show: false,
        },
      },
      {
        type: 'value',
        show: false,
        name: '',
        min: 0,
        max: props.max,
        interval: props.interval,
        axisLabel: {
          formatter: '{value}',
        },
      },
    ],
    series: [
      {
        name: '',
        type: 'bar',
        showBackground: true,
        barWidth: '40%',
        tooltip: {
          show: false,
          valueFormatter: function (value) {
            return value + ' ml'
          },
        },
        data: [0, 0, 0, 0, 0, 0],
      },
      {
        name: '',
        type: 'line',
        yAxisIndex: 1,
        symbolSize: 8,
        data: props.charData,
        itemStyle: {
          color: '#F8AE03',
          borderColor: 'transparent',
        },
        lineStyle: {
          color: '#F8AE03',
        },
      },
    ],
  }
})
</script>

<template>
  <div class="w-full h-full">
    <BaseChart :chartOptions="chartOptions" />
  </div>
</template>

<style scoped></style>
